<template>
    <el-container class="edit_container">
        <el-header class="header_box">
            <el-form ref="formRef" :model="edit.info"></el-form>
            <el-space>
                <el-button type="primary" @click="submit">保存</el-button>
            </el-space>
        </el-header>
        <el-container>
            <el-aside width="300px" class="left_box">
<!--                组件库-->
                <left/>
            </el-aside>
            <el-main class="main_box">
<!--                手机展示-->
                <phone/>
            </el-main>
            <el-aside width="400px" class="right_box">
<!--                组件编辑区域-->
                <right/>
            </el-aside>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">

import Phone from "@/views/site/diy/components/Phone/index.vue";
import Left from "@/views/site/diy/components/Left/index.vue";
import Right from "@/views/site/diy/components/Right/index.vue";
import {computed, onBeforeMount, provide, reactive, ref} from "vue";
import Edit from "@/model/edit";
import {useRoute} from "vue-router";
import {FormInstance} from "element-plus";
import {simpleGet} from "@/utils/request";
import {tabBar} from "@/views/site/diy/diy";

const route = useRoute()
const formRef = ref<FormInstance>()
const edit = reactive(new Edit({
    info: {
        id: route.params.id,
        content: {
            components:[],
            tab_bar:tabBar,
        }
    }
}))
const selectedComponent = reactive({
    index:0,
    info:{},
})

const submit = () => {
    const url = `/site.diyPage/${(edit.info.id) ? 'edit':'add'}`
    edit.submit({
        formRef: formRef.value,
        url: url,
    }).then((res:any) => {
        // 更新id
        edit.info.id = res.info.id
    })
}

onBeforeMount(() => {
    edit.init(async () => {
        if (edit.info.id){
            const {info} = await simpleGet("/site.diyPage/edit", {id: edit.info.id})
            if (!info.content.tab_bar){
                info.content.tab_bar = tabBar
            }
            edit.info = info
        }
    })
})

provide("page", edit)
provide("selectedComponent", selectedComponent)

</script>

<style scoped lang="scss">
.edit_container{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f0f2f5;
    min-width: 1200px;

    .main_box{
        //background-color: #f8f6f6;
        //box-shadow: 0px 1px 2px 6px #fdf6f6 inset;
    }
    .header_box{
        background-color: #fff;
        box-shadow: 0 1px 4px #00152914;
        display: flex; justify-content: space-between;
    }
    .left_box{
        position: relative;
        background-color: #fff;
        box-shadow: 0 1px 4px #00152914;
    }
    .right_box{
        position: relative;
        background-color: #fff;
        box-shadow: 0 1px 4px #00152914;
    }
}
</style>
